<template>
  <div>
    <!-- 二级路由出口 -->
    <router-view></router-view>

    <van-tabbar v-model="active" class="icon" route>
      <van-tabbar-item to="/article" icon="wap-home-o">首页 </van-tabbar-item>
      <van-tabbar-item to="/find" icon="search">找房 </van-tabbar-item>
      <van-tabbar-item to="/news" icon="todo-list-o">资讯 </van-tabbar-item>
      <van-tabbar-item to="/user" icon="contact">我的 </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style scoped>
.icon {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 3.125rem;
  border-top: 0.125rem solid #f2f2f2;
}
</style>
